<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 主页示例模板二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/ui/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/ui/style/admin.css" media="all">
    <style>
        .label_title{
            border-top-width: 2px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-left-width: 0px;
            border-style: solid;
            padding-inline-end: 0px;
            padding-inline-start: 0px;
            padding-block-start: 0px;
            padding-block-end: 0px;
        }

        .label_title legend{
            padding-inline-start: 15px;
            padding-inline-end: 15px;
            line-height: 20px;
            font-size: 13px;
        }

        .marSelect{
            margin-bottom:20px !important;
        }
    </style>
</head>
<body>

    {block name="form"}
    <div class="layui-fluid">

        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    
                    {block name="inputBtn"}{/block}

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        {/block}

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                <div class="layui-card-body">
                        <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar" ></table>
                    
                        <script type="text/html" id="test-table-toolbar-toolbarDemo">
                            <div class="layui-btn-container">

                              {block name="tableTopBtn"}{/block}

                            </div>
                        </script>
                            
                        <script type="text/html" id="test-table-toolbar-barDemo">
                            
                          {block name="tableEndBtn"}{/block}
                            
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {block name="content"}{/block}
    <script src="/static/ui/layui/layui.js"></script>
    {include file="public/ajax" /}

    <script>
    var views = {
        obj:{}
        ,_func:false // 统一事件处理
        ,_form:false // 表单搜索
        ,_addUrl:''
        ,_delUrl:''
        ,_upUrl:''
        ,_tool:false // 监听行工具事件
        ,_table:false
        ,_tables:false
        ,setUrl:function(viewAdd,viewDel,viewUp){
            this._addUrl = viewAdd + '?adminrankkey=add'
            this._delUrl = viewDel + '?adminrankkey=del'
            this._upUrl = viewUp + '?adminrankkey=up'
            return this
        }
        ,get:function(){
            var that = this

            layui.config({
                base: '/static/ui/' //静态资源所在路径
            }).extend({
                index: '/lib/index' //主入口模块
            }).use(['index', 'table','laydate','util'], function(){
                var admin = layui.admin
                ,table = layui.table
                ,laydate = layui.laydate
                ,util = layui.util
                ,form = layui.form;

                that._table = table
                that.__tables = table.render(that.obj);

                // 表单搜索
                that.getForm(form)

                that.getToolbar()

                that.getTool()

                // 事件监听
                if(that._func){
                    that._func(table,admin,laydate)
                }
                
                //日期时间选择器

                laydate.render({
                    elem: '#test-laydate-range-datetime'
                    ,type: 'datetime'
                    ,range: '|'
                    ,format: 'yyyy-M-d H:m:s'
                });
                
            });
        }
        ,cols:function(viewObj){
            this.obj = viewObj
            this.obj.data = viewObj.data || ''
            this.obj.url = viewObj.url + '?adminrankkey=title'+this.obj.data || ''
            this.obj.cols = [viewObj.cols] || []
            this.obj.elem = viewObj.elem || '#test-table-toolbar'
            this.obj.page = typeof viewObj.page != "undefined" ? viewObj.page : true
            this.obj.totalRow = typeof viewObj.totalRow != "undefined" ? viewObj.totalRow : false
            this.obj.skin = viewObj.skin || 'nob'
            this.obj.even = typeof viewObj.even != "undefined" ? viewObj.even : true
            this.obj.toolbar = viewObj.toolbar || '#test-table-toolbar-toolbarDemo'
            return this
        }
        // 表单搜索
        ,form:function(viewObj){
            this._form = viewObj
            return this
        }
        ,getForm:function(viewObj){
            var that = this

            if(that._form){
                that._form(viewObj)
            }else{
                //监听搜索
                viewObj.on('submit(LAY-app-contlist-search)', function(data){
                    //执行重载
                    that._table.reload('test-table-toolbar', {
                        where: data.field
                        ,page: {
                            curr:1
                        }
                    });
                });
            }
        }
        ,toolbar:function(viewObj){
            this._toolbar = viewObj
            return this
        }
        ,getToolbar:function(){
            var that = this

            that._table.on('toolbar(test-table-toolbar)', function(obj){
                var checkStatus = that._table.checkStatus(obj.config.id);
                
                var event = '';
                if(that._toolbar){
                    var event = that._toolbar(obj,checkStatus,that._table)
                }

                if (obj.event == 'del' && event != 'del') {
                    var idDelArr = [];
                    if(checkStatus.data.length){
                        for(var i = 0;i < checkStatus.data.length;i++){
                            idDelArr[i] = checkStatus.data[i].id
                        }

                        layer.confirm('真的删除么', function(index){

                            ajax({
                                url : that._delUrl, 
                                type : 'post', 
                                data : {
                                    'id':idDelArr
                                }, 
                                cache : false, 
                                dataType : "json", 
                                success : function(res) {
                                    if(!res.code){
                                        that._table.reload('test-table-toolbar', {
                                            // where: obj.config.where
                                        });
                                    }

                                    layer.close(index);
                                }
                            },layui.$); 
                        }); 
                    }

                } else if (obj.event == 'add' && event != 'add'){
                    var index = layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: that._addUrl
                    });
                    layer.full(index);
                }
            });
        }
        ,tool:function(viewObj){
            this._tool = viewObj
            return this
        }
        ,getTool:function(){
            var that = this

            that._table.on('tool(test-table-toolbar)', function(obj){

                var data = obj.data;
                
                var event = ''
                if(that._tool){
                    event = that._tool(obj,that._table,that.__tables)
                }

                if(obj.event === 'del' && event != 'del'){

                    layer.confirm('真的删除么', function(index){

                        ajax({
                            url : that._delUrl, 
                            type : 'post', 
                            data : {
                                'id':[data.id]
                            }, 
                            cache : false, 
                            dataType : "json", 
                            success : function(data) {
                                obj.del();
                                layer.close(index);
                            }
                        },layui.$); 
                        
                    });
                } else if(obj.event === 'edit' && event != 'edit'){

                    var index = layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: that._upUrl+'&id='+data.id
                    });
                    layer.full(index);

                }
                
            });

        }
        ,func:function(viewObj){
            this._func = viewObj
            return this
        }
      
      };



    </script>
    {block name="script"}{/block}

<script>
    // layui.config({
    //     base: '/static/ui/' //静态资源所在路径
    // }).extend({
    //     index: '/lib/index' //主入口模块
    // }).use(['index', 'table'], function(){
    //     var admin = layui.admin
    //     ,table = layui.table
    //     ,form = layui.form;

    //     table.render({
    //         autoSort: false,
    //         elem: '#test-table-toolbar'
    //         ,url: '/admin.php/index/indexList'
    //         ,toolbar: '#test-table-toolbar-toolbarDemo'
    //         ,title: '用户数据表'
    //         ,cols: [[
    //             {type: 'checkbox', fixed: 'left'}

    //             ,{field:'id', title:'ID'}
    //             ,{field:'username', title:'用户名', edit: 'text'}
    //             ,{field:'email', title:'邮箱', edit: 'text'}
    //             ,{field:'sex', title:'性别', edit: 'text'}
    //             ,{field:'city', title:'城市'}
    //             ,{field:'sign', title:'签名'}
    //             ,{field:'experience', title:'积分'}
    //             ,{field:'ip', title:'IP'}
    //             ,{field:'logins', title:'登入次数'}
    //             ,{field:'joinTime', title:'加入时间'}

    //             ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo'}
    //         ]]
    //         ,page: true
    //     });
        
    //     //头工具栏事件
    //     table.on('toolbar(test-table-toolbar)', function(obj){
    //         var checkStatus = table.checkStatus(obj.config.id);
    //         switch(obj.event){
    //             case 'getCheckData':
    //             var data = checkStatus.data;
    //             console.log(data)
    //             layer.alert(JSON.stringify(data));
    //             break;
    //             case 'getCheckLength':
    //             var data = checkStatus.data;
    //             layer.msg('选中了：'+ data.length + ' 个');
    //             break;
    //             case 'isAll':
    //             layer.msg(checkStatus.isAll ? '全选': '未全选');
    //             break;
    //         };
    //     });
        
    //     //监听行工具事件
    //     table.on('tool(test-table-toolbar)', function(obj){
    //         var data = obj.data;
    //         if(obj.event === 'del'){
    //             layer.confirm('真的删除行么', function(index){
    //             obj.del();
    //             layer.close(index);
    //             });
    //         } else if(obj.event === 'edit'){
    //             // layer.prompt({
    //             // formType: 2
    //             // ,value: data.email
    //             // }, function(value, index){
    //             // obj.update({
    //             //     email: value
    //             // });
    //             // layer.close(index);
    //             // });
    //             layer.open({
    //                 type: 2, 
    //                 content: '/admin.php/index/home' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    //             }); 
    //         }
    //     });
        
    //     //监听搜索
    //     form.on('submit(LAY-app-contlist-search)', function(data){
    //         var field = data.field;
    //         console.log(field)

    //         //执行重载
    //         table.reload('test-table-toolbar', {
    //             where: field
    //             ,page: {
    //                 curr:1
    //             }
    //         });
    //     });
    // });
</script>
</body>
</html>